// 所有react项目都要有
import react, { Component, Fragment } from 'react';
// 虚拟DOM、JSX解析器
import reactDom from 'react-dom';

// 在页面上“渲染”元素
// JSX：javascript X eXtend
// 类似HTML，但它更像JS。用JS来呈现的HTML对象。

// 函数调用
const app = () => {
  return <h1>Hello react! JSX. function </h1>;
};

// 组件调用，这是一个函数的组件，首字母大写。
// JSX里引用变量，要用花括号。
const AppFunc = (props) => {
  return (
    <>
      <h1>Hello react!</h1>
      <p>JSX</p>
      <p>function Component</p>
      <p>{props.name}</p>
      <p>{props.sex}</p>
      <p>
        fragment组件的简写是<></>
      </p>
    </>
  );
};

// class组件，从react.Component组件扩展来。
class AppClass extends Component {
  // 每个class组件都要有的，必备的。
  render() {
    return (
      <>
        <div>class组件</div>
        <UserInfo name={this.props.name} sex={this.props.sex} />
      </>
    );
  }
}

// 函数式组件 VS class组件
// class组件代表主流，函数式组件代表理念和方向。

// 组件的运用：组合、嵌套。
class App extends Component {
  // 每个class组件都要有的，必备的。
  render() {
    return (
      <>
        <AppFunc name='谢金水' sex='男' />
        <AppClass name='谢至清' sex='女' />
      </>
    );
  }
}

class UserInfo extends Component {
  // 每个class组件都要有的，必备的。
  render() {
    return (
      <>
        <p>姓名：{this.props.name}</p>
        <p>性别：{this.props.sex}</p>
      </>
    );
  }
}

reactDom.render(<App />, document.getElementById('root'));
